<template>
  <div>
    <Header title="个人中心"></Header>
    <el-container>
      <el-card class="box-card">
        <div class="spacebetween">
          <div class="block">
            <el-avatar :size="50" :src="head"></el-avatar>
            <span v-if="isLogin">{{username}}</span>
            <span v-else @click="$global.goPage('/login')">请先登录</span>
          </div>
          <a v-if="isLogin" @click="$global.goPage('/modify')">
            <div class="minetitle">个人资料<i class="el-icon-arrow-right"></i></div></a>
        </div>
      </el-card>
      <div v-if="isLogin">
            <el-card>
              <div slot="header" class="card-header">影视</div>
              <a @click="$global.goPage({name:'movFav', params:{title:'我的想看'}})"><el-row class="list">我的想看<i class="el-icon-arrow-right"></i></el-row></a>
              <a @click="$global.goPage({name:'movFav', params:{title:'我的收藏'}})"><el-row class="list">我的收藏<i class="el-icon-arrow-right"></i></el-row></a>
              <a @click="$global.goPage({name:'movCom', params:{title:'我的评论'}})"><el-row class="list">我的评论<i class="el-icon-arrow-right"></i></el-row></a>
              <a @click="$global.goPage({name:'movCom', params:{title:'点赞的评论'}})"><el-row class="list">点赞的评论<i class="el-icon-arrow-right"></i></el-row></a>
            </el-card>
        <el-card>
          <div slot="header" class="card-header">音乐</div>
          <a @click="$global.goPage({name:'MusLike', params:{title:'我喜欢的音乐'}})"><el-row class="list">我喜欢的音乐<i class="el-icon-arrow-right"></i></el-row></a>
          <a @click="$global.goPage({name:'MusFList', params:{title:'收藏的歌单'}})"><el-row class="list">收藏的歌单<i class="el-icon-arrow-right"></i></el-row></a>
          <a @click="$global.goPage({name:'MusCom', params:{title:'我的评论'}})"><el-row class="list">我的评论<i class="el-icon-arrow-right"></i></el-row></a>
          <a @click="$global.goPage({name:'MusCom', params:{title:'点赞的评论'}})"><el-row class="list">点赞的评论<i class="el-icon-arrow-right"></i></el-row></a>

        </el-card>

      </div>


      <el-row style="margin-top: 30px;">
        <el-button type="primary" @click="isLogin?outLogin():$global.goPage('/login')">{{isLogin?'安全退出':'登录/注册'}}</el-button>
      </el-row>

    </el-container>
  <Footer></Footer>
  </div>
</template>

<script>
import {mapState} from 'vuex'
    import Header from "../../components/Header";
    import Footer from "../../components/Footer";
    export default {
      name: "center",
      components: {Footer, Header},
      computed:{
        ...mapState({
          isLogin: state=>state.user.isLogin,
          username:state=>state.user.username,
          head:state=>state.user.head
        })
      },
      methods: {
      async  outLogin(){
         const res=await this.$confirm('确定要退出吗？','提示',{
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type:'warning'
          }).catch(err =>err);
         if(res!=="confirm"){this.$message.error('已经取消退出')}
         else{
           this.$store.dispatch('user/Out')
           location.reload()
         }
        }
      }
    }
</script>

<style scoped>
.box-card {
  width: 100%;
}
  .block{
    font-size: 30px;
    font-weight: 500;
   display: flex;
  }
  .el-avatar{
    margin-right: 20px;
  }
/deep/ .el-avatar>img{
  width: 100%;
  height: 100%;
}
.minetitle{
font-size: 20px;
  padding: 10px;
color: #6f6c6c;
}
</style>
